<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		<title>{{ .Title }}</title>
 
        <link rel="stylesheet" href="{{ .Prefix }}/-/assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="{{ .Prefix }}/-/assets/css/font-awesome.min.css">
        <link rel="stylesheet" href="{{ .Prefix }}/-/assets/css/github-markdown.css">
		
		<script src="{{ .Prefix }}/-/assets/js/jquery.min.js"></script>
		<script src="{{ .Prefix }}/-/assets/js/jquery.qrcode.min.js"></script>
		<script src="{{ .Prefix }}/-/assets/js/showdown.min.js"></script>
		<script src="{{ .Prefix }}/-/assets/js/bootstrap.min.js"></script>
	</head>
	
	<body>
		<nav class="navbar navbar-dark" style="background-color: #1b926c;">
            <div class="container">
                <a class="navbar-brand" href="#">{{ .Title }}</a>
                <div class="d-inline ml-auto">
                    <input id="search" class="form-control py-0" autocomplete="off" type="search" placeholder="快速查找">
                </div>
            </div>
        </nav>

        <div class="container my-2">            
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb py-1 my-3"></ol>
            </nav>

            <div class="mt-4 mb-2">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#modal-folder"><i class="fa fa-fw fa-plus mr-1"></i>新建子目录</button>
                <button id="btn-upload" type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-fw fa-upload mr-1"></i>上传文件</button>
            </div>            

            <table class="table table-sm border-bottom border-left border-right">
                <thead class="thead-light">
                    <tr>
                        <th class="pl-3">名称</th>
                        <th class="text-center">大小</th>
                        <th class="text-center">修改时间</th>
                        <th class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody id="list">
                    {{ if .IsError }}
                    <tr>
                        <td colspan="4" style="font-weight: bolder; font-size: 48px; padding-top: 32px; text-align: center; color: lightgray;">404 NOT FOUND</td>
                    </tr>
                    {{ else }}
                    {{ range .Contents }}
                    <tr style="height: 36px; line-height: 36px;" data-name="{{ .Name }}">
                        <td>
                            {{ if .IsDir }}
                            <a href="{{ .Path }}"><i class="fa fa-fw fa-{{ .Icon }} mr-1"></i>{{ .Name }}</a>
                            {{ else }}
                            <i class="fa fa-fw fa-{{ .Icon }} mr-1"></i>{{ .Name }}
                            {{ end }}
                        </td>
                        <td class="text-right pr-4">{{ .Size }}</td>
                        <td class="text-center">{{ .ModTime }}</td>
                        <td>
                            {{ if not .IsDir }}
                            <a href="{{ .Path }}" class="btn btn-sm btn-outline-secondary" style="font-size: 10px;">
                                <i class="fa fa-fw fa-download mr-1"></i>下载
                            </a>
                            <button type="button" class="btn btn-sm btn-outline-secondary" style="font-size: 10px;" data-toggle="modal" data-target="#modal-qrcode" data-name="{{ .Name }}" data-path="{{ .Path }}">
                                <i class="fa fa-fw fa-qrcode"></i>
                            </button>
                            {{ end }}
                        </td>
                    </tr>
                    {{ end }}
                    {{ end }}
                </tbody>
            </table>

            {{ if .ReadMe }}
            <div class="card">
                <div class="card-header"><i class="fa fa-fw fa-book mr-1"></i>目录说明</div>
                <div class="card-body">
                    <article class="markdown-body"></article>
                </div>
            </div>
            {{ end }}

            <div id="wait-mask" class="position-fixed w-100 h-100" style="left: 0; top: 0; background-color: rgba(0, 0, 0, 0.253);" hidden>
                <div class="d-flex justify-content-center align-items-center w-100 h-100">
                    <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>

            <div id="modal-qrcode" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header py-2">
                            <h5 class="modal-title">
                                <i class="fa fa-fw fa-qrcode mr-1"></i>扫描二维码
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <div class="text-center qrcode"></div>
                            <p class="text-center mt-3"></p>
                        </div>
                    </div>
                </div>
            </div>

            <div id="modal-folder" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header py-2">
                            <h5 class="modal-title">新建子目录</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <form>
                                <div class="alert alert-danger alert-dismissible fade show" role="alert" hidden>
                                    <strong>出错了：</strong><span></span>
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>

                                <div class="form-group mb-0">
                                    <input type="text" class="form-control" id="folder">
                                    {{ if .Prefix }}
                                    <small>根目录下的<span class="badge badge-secondary mx-1">{{ .Prefix }}</span>为保留字</small>
                                    {{ end }}
                                </div>
                            </form>
                        </div>

                        <div class="modal-footer py-1">
                            <button id="btn-submit-folder" type="button" class="btn btn-sm btn-outline-primary">提交</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    <script type="text/javascript">
    // 当前浏览目录导航    
    var path = '{{ .Path }}';
    var subs = path.split('/');
    var appended = "{{ .Prefix }}";
    $('.breadcrumb').empty();
    $('.breadcrumb').append('<li class="breadcrumb-item"><a href="{{ .Prefix }}/"><i class="fa fa-fw fa-home"></i></a></li>');
    subs.forEach((v, i) => {
        if (i == 0) return;

        if (i == subs.length - 1) {
            $('.breadcrumb').append('<li class="breadcrumb-item active" aria-current="page">' + v + '</li>');
        } else {
            appended += "/" + v;
            $('.breadcrumb').append(
                '<li class="breadcrumb-item">' +
                '<a href="' + appended + '">' + v + '</a>' +
                '</li>'
            );
        }        
    });
    
    // 二维码显示
    $('#modal-qrcode').on('show.bs.modal', function (ev) {
        var btn = $(ev.relatedTarget);
        var path = btn.data('path');
        var name = btn.data('name');

        var modal = $(this);
        var canvas = modal.find('.modal-body>.qrcode');
        canvas.empty();
        canvas.qrcode(encodeURI(location.protocol + '//' + location.host + path));

        modal.find('.modal-body>p').get(0).innerHTML = name;
    })

    // 快速查找
    $('#search').on('input', function (ev) {
        var name = $(this).val().toLowerCase();

        if (name.length == 0) {
            $('#list>tr').removeAttr('hidden');
        } else {
            $('#list>tr').each((_, elem) => {
                var tr = $(elem);
                var match = tr.data('name').toLowerCase().indexOf(name) > -1;
                if (match) {
                    tr.removeAttr('hidden');
                } else {
                    tr.attr('hidden', true);
                }
            });
        }
    })

    // 创建子目录
    $('#btn-submit-folder').click(function (ev) {
        var name = $('#folder').val()
        $.post('{{ .Prefix }}/-/api/folder', {path: '{{ .Path }}', name: name}, rsp => {
            if (rsp.ok) {
                location.reload();
            } else {
                $('#modal-folder .alert>span').get(0).innerHTML = rsp.errMsg;
                $('#modal-folder .alert').removeAttr('hidden');
            }
        }, 'json');
    })

    // 上传文件
    $('#btn-upload').click(function (ev) {
        var input = document.createElement('input')
        input.type = 'file';
        input.accept = '*/*';
        input.hidden = true;
        input.multiple = false;
        input.addEventListener('change', function() {
            if (input.files.length > 0) {
                var param = new FormData();
                param.append('file', input.files[0], input.files[0].name)
                param.append('path', '{{ .Path }}/')

                $('#wait-mask').removeAttr('hidden');
                $.ajax({
                    type: 'POST',
                    url: '{{ .Prefix }}/-/api/upload',
                    contentType: false,
                    processData: false,
                    data: param,
                    dataType: 'json',
                    success: function(rsp) {
                        $('#wait-mask').attr('hidden', true);
                        if (rsp.ok) location.reload()
                        else alert(rsp.errMsg);
                    }
                })
            } else {
                input.remove();
            }
        })

        document.body.append(input);
        input.click();
    })
    </script>

    {{ if .ReadMe }}
    <script>
        $.get('{{ .ReadMe }}', function(data) {
            var converter = new showdown.Converter({
                strikethrough: true,
                tables: true,
                tasklists: true,
                emoji: true,
                underline: true,
                smartIndentationFix: true,
            });
            $('article').html(converter.makeHtml(data));
        })
    </script>
    {{ end }}
</html>